<template>
  <div id="WxjhAdd">
    <h1>新增计划</h1>
    <el-form
      :model="ruleForm"
      :inline="true"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      style="width: 1140px"
      label-position="left"
      :hide-required-asterisk="false"
    >
      <el-form-item label="维修编号" prop="id">
        <el-input
          v-model="ruleForm.id"
          style="width: 350px"
          placeholder="请输入维修编号"
        ></el-input>
      </el-form-item>
      <el-form-item label="装备编号" prop="equipmentNumber">
        <el-input
          v-model="ruleForm.equipmentNumber"
          style="width: 350px"
          placeholder="请输入装备编号"
        ></el-input>
      </el-form-item>
      <el-form-item label="装备名称" prop="equipmentId">
        <el-select
          v-model="ruleForm.equipmentId"
          placeholder="请选择装备名称"
          style="width: 350px"
        >
          <el-option
            v-for="v in equipmentNames"
            :label="v.equipName"
            :value="v.id"
            :key="v.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="计划时间" label-width="100px" prop="planTime">
        <el-date-picker
          type="date"
          placeholder="请选择计划时间"
          v-model="ruleForm.planTime"
          style="width: 350px"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="开始时间" label-width="100px" prop="startTime">
        <el-date-picker
          type="date"
          placeholder="请选择开始时间"
          v-model="ruleForm.startTime"
          style="width: 350px"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" label-width="100px" prop="endTime">
        <el-date-picker
          type="date"
          placeholder="请选择结束时间"
          v-model="ruleForm.endTime"
          style="width: 350px"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="维修部门" prop="deptId">
        <el-select
          v-model="ruleForm.deptId"
          placeholder="请选择维修部门"
          style="width: 350px"
        >
          <el-option
            v-for="v in depart"
            :label="v.pdept"
            :value="v.pdeptId"
            :key="v.pdeptId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="故障描述" prop="desc">
        <el-input
          type="textarea"
          v-model="ruleForm.desc"
          :autosize="{ minRows: 4, maxRows: 8 }"
          style="width: 810px"
          placeholder="请输入故障内容"
        ></el-input>
      </el-form-item>
      <el-form-item style="width: 810px; text-align: center">
        <el-button @click="cancelFn('ruleForm')"> 取消 </el-button>
        <el-button type="primary" @click="addBtn('ruleForm')">
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        id: null,
        equipmentNumber: null,
        equipmentId: null,
        planTime: "",
        startTime: "",
        endTime: "",
        deptId:null,
        desc: "",
      },
      rules: {
        id: [{ required: true, message: "请输入维修编号", trigger: "blur" }],
        equipmentNumber: [{ required: true, message: "请输入装备编号", trigger: "blur" }],
        equipmentId: [
          { required: true, message: "请选择装备名称", trigger: "change" },
        ],
        deptId: [
          { required: true, message: "请选择维修部门", trigger: "change" },
        ],
        planTime: [
          { required: true, message: "请选择计划时间", trigger: "change" },
        ],
        startTime: [
          { required: true, message: "请选择开始时间", trigger: "change" },
        ],
        endTime: [
          { required: true, message: "请选择结束时间", trigger: "change" },
        ],
        desc: [
          { required: true, message: "请填写故障内容", trigger: "blur" },
        ],
      },
      equipmentNames: [],
      depart:[],
    };
  },
  methods: {
    addBtn(form) {
      this.$refs[form].validate((v) => {
        if (v) {
          this.$axios({
            url:"/keepPlan/addKeepPlan",
            method:"post",
            data:this.ruleForm,
          }).then(({data})=>{
            if(data.code==0){
              this.$message.success("添加成功！");
              this.$router.replace('/home/Wxjh')
            }else{
              this.$message.error("添加失败！");
            }
          })
        } else {
          this.$message.error("请完善添加内容！");
        }
      });
    },
    cancelFn(form) {
      this.$refs[form].resetFields();
      this.$router.replace("/home/Wxjh");
    },
  },
  mounted: function () {
    this.$axios({
      url: "/equipment/preselect",
    }).then(({ data }) => {
      if(data.code==0){
        this.equipmentNames = data.equipmentNames;
      }else{
        this.$message.error("下拉菜单加载失败！");
      }
    });
    this.$axios.get("/personal/pdept").then(({data})=>{
      if(data.code==0){
        this.depart=data.data
      }else{
        this.$message.error("下拉菜单加载失败！");
      }
    })
  },
};
</script>

<style scoped lang="less">
#WxjhAdd {
  padding: 30px;
  h1 {
    padding-bottom: 30px;
  }
}
</style>